<script setup lang="ts">
import { ref } from "vue";
import { onMessage } from "./utils/message";
import AddRemoveList from "./Transition/AddRemoveList.vue";
import { Search } from '@element-plus/icons-vue';
import { convartBgURL } from "@/common";


/** 显示状态 */
const showModal = ref(false); // 默认：不显示
// 搜索内容
const search = ref("");
// 搜索框 placeholder
const searchPlaceholder = ref("");

// 去搜索
const go = () => {
  const searchUrl = `https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=${search.value}`;
  document.location.href = searchUrl;
};
// 去热搜
const goHotSearch = () => {
  document.location.href = "https://top.baidu.com/board";
};
// 去deepseek
const goDeepseek = () => {
  document.location.href =
    "https://chat.baidu.com/search?isShowHello=1&pd=csaitab&setype=csaitab&extParamsJson=%7B%22enter_type%22%3A%22ai_explore_home%22%7D&usedModel=%7B%22modelName%22%3A%22DeepSeek-R1%22%7D";
};

onMounted(() => {
  // 监听内容脚本发送的 状态
  onMessage(
    (e: Event & { detail: { message: string; data: { status: boolean } } }) => {
      if (e.detail.message === "setSearchInputShowStatus") {
        const status = e.detail.data.status;
        if (status) {
          showModal.value = true;
        } else {
          showModal.value = false;
        }
      }
    }
  );
});
</script>

<template>
  <AddRemoveList>
    <div v-if="showModal" class="search-input">
      <div>
        <el-tooltip
          effect="light"
          content="百度&nbsp; &nbsp;热搜"
          placement="top"
          :hide-after="300"
          :offset="20"
        >
          <el-image
            class="baidu-img"
            :src="convartBgURL('/baidu.png')"
            fit="cover"
            @click="goHotSearch"
          />
        </el-tooltip>
      </div>
      <div>
        <el-tooltip
          effect="light"
          content="DeepSeek"
          placement="bottom"
          :hide-after="100"
          :offset="10"
        >
          <el-image
            class="deepseek-img"
            :src="convartBgURL('/deepseek.png')"
            fit="cover"
            @click="goDeepseek"
          />
        </el-tooltip>
        <el-input
          v-model="search"
          :placeholder="searchPlaceholder"
          class="input"
          @blur="$el?.classList.add('focus')"
          @focus="$el?.classList.remove('focus')"
        />
        <el-button
          type="primary"
          :icon="Search"
          style="height: 36px; padding: 8px 20px; outline: none"
          @click="go"
        />
      </div>
    </div>
  </AddRemoveList>
</template>

<style lang="less" scoped>
.search-input {
  transition: 0.5s;
  position: fixed;
  top: 120px;
  width: 100%;
  z-index: 1;

  > div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .baidu-img {
    width: 250px;
    height: 110px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: 0.5s;

    &:hover {
      transition: 0.5s;
      background: white;
      padding: 15px;
      padding-top: 0px;
      padding-bottom: 30px;
      border-radius: 5px;
    }
  }

  .input {
    width: 450px;
    margin-right: 10px;
    height: 36px;
    border: 0px;
    outline: none;

    &.focus {
      outline: auto;
    }
  }

  .deepseek-img {
    height: 36px;
    background: white;
    border-radius: 10px 2px 10px 5px;
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
